<template name='login'>
  <div class="ui equal width grid" style="max-width:600px;margin:auto;margin-top:10px;">
    {{#if isSelectingNetwork}}
      <div class='row' style='margin: 15px;'>
        <h1>Login</h1>
        <p>
          DTube supports authentication with multiple networks at the same time.
          Please select a network:
        </p>
      </div>
      
      {{#if noAvalonLogin}}
      <div class="column loginOption" data-network="Avalon">
        {{#if isNightMode}}
        <img src="./DTube_files/images/logos/dtube_white.png">
        {{else}}
        <img src="./DTube_files/images/logos/dtube.png">
        {{/if}}
        <span>DTube</span>
      </div>
      {{else}}
      <div class="column loginOptionDisabled" data-network="Avalon">
        {{#if isNightMode}}
        <img src="./DTube_files/images/logos/dtube_white.png">
        {{else}}
        <img src="./DTube_files/images/logos/dtube.png">
        {{/if}}
        <span>{{translate 'LOGIN_LOGGED_IN'}} <strong>{{activeUsername}}</strong></span>
        <br /><br />
        <button class="ui red button logOut" data-network='{{this}}'>Log-out</button>
      </div>
      {{/if}}
      {{#each randomOrder}}
        {{#if equals this 'steem'}}
          {{#if noSteemLogin}}
          <div class="column loginOption" data-network="Steem">
            <img src="./DTube_files/images/logos/steem.png">
            <span>Steem</span>
          </div>
          {{else}}
          <div class="column loginOptionDisabled" data-network="Steem">
            <img src="./DTube_files/images/logos/steem.png">
            <span>{{translate 'LOGIN_LOGGED_IN'}} <strong>{{activeUsernameSteem}}</strong></span>
            <br /><br />
            <button class="ui red button logOut" data-network='{{this}}'>Log-out</button>
          </div>
          {{/if}}
        {{/if}}
        {{#if equals this 'hive'}}
          {{#if noHiveLogin}}
          <div class="column loginOption" data-network="Hive">
            <img src="./DTube_files/images/logos/hive.png">
            <span>Hive {{>badgenew}}</span>
          </div>
          {{else}}
          <div class="column loginOptionDisabled" data-network="Hive">
            <img src="./DTube_files/images/logos/hive.png">
            <span>{{translate 'LOGIN_LOGGED_IN'}} <strong>{{activeUsernameHive}}</strong></span>
            <br /><br />
            <button class="ui red button logOut" data-network='{{this}}'>Log-out</button>
          </div>
          {{/if}}
        {{/if}}
      {{/each}}
    {{/if}}

    {{#if isAvalonAuth}}
    {{>loginavalon}}
    {{/if}}

    {{#if isHiveAuth}}
    {{>loginhive}}
    {{/if}}

    {{#if isSteemAuth}}
    {{>loginsteem}}
    {{/if}}
  </div>
</template>
